<template>
  <basic-container>
    <avue-crud
      :option="option"
      :data="data"
      :table-loading="loading"
      @search-change="searchChange"
      @search-reset="searchReset"
      :page.sync="page"
      @size-change="sizeChange"
      @current-change="currentChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-button type="primary" @click="openImport">导入</el-button>
        <el-button size="small" type="primary" @click="handleGet">下载模版</el-button>
      </template>
      <template slot="supplierIdentity" slot-scope="scope">
        <el-tag :type="['', 'warning', 'primary', 'success', 'info'][scope.row.supplierIdentity]">
          {{ scope.row.supplierIdentity_dictText }}
        </el-tag>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import { suppListOption, page } from '@/option/tenant/supplier/info'
import { getList } from '@/api/supplier/info'
import { setStore, removeStore } from '@/util/store'

export default {
  name: 'Info',
  data() {
    return {
      loading: false,
      query: {},
      data: [],
      page,
      option: {
        ...suppListOption,
        operatingButtons: this.getOperatingButtons
      }
    }
  },
  methods: {
    refreshChange() {
      this.onLoad(this.page, this.query)
    },
    getOperatingButtons(row) {
      const edit = { text: '编辑', callback: this.handleEdit }
      const view = { text: '详情', callback: this.handleView }
      const set = { text: '设置', callback: this.handleSet }
      const history = { text: '历史记录', callback: this.handleHistory }
      const supplierList = { text: '供货清单', callback: this.handleSupplier }
      if (row.row.supplierIdentity === '1' || row.row.supplierIdentity === '2') return [edit, set, history, view]
      if (row.row.supplierIdentity === '3') return [set, supplierList, history, view]
      if (row.row.supplierIdentity === '4') return [set, history, view]
      // console.log(row)
    },
    searchReset() {
      this.query = {}
      this.onLoad(this.page)
    },
    onLoad(page, params = {}) {
      this.loading = true
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data
        this.page.total = data.total
        this.data = data.records
        this.loading = false
      })
    },
    searchChange(params, done) {
      this.query = params
      this.page.currentPage = 1
      this.onLoad(this.page, params)
      done()
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    handleAdd() {
      removeStore({ name: 'supplierId', type: 'session' })
      this.$quickDrawer({
        title: '新增',
        width: '90%',
        component: require('@/views/tenant/supplier/info/form').default,
        props: { type: 'add' }
      })
    },
    handleEdit(row) {
      setStore({
        name: 'supplierId',
        content: row.id,
        type: 'session'
      })
      this.$quickDrawer({
        title: '编辑',
        width: '90%',
        component: require('@/views/tenant/supplier/info/form').default,
        props: { type: 'edit' }
      })
    },
    handleView(row) {
      setStore({
        name: 'supplierId',
        content: row.id,
        type: 'session'
      })
      this.$quickDrawer({
        title: '详情',
        width: '90%',
        component: require('@/views/tenant/supplier/info/form').default,
        props: { type: 'view' }
      })
    },
    handleHistory(row) {
      this.$quickDrawer({
        title: '历史记录',
        width: '90%',
        component: require('@/views/tenant/supplier/info/history').default,
        props: { supplierId: row.id }
      })
    },
    handleSet(row) {
      this.$quickModal({
        title: '设置',
        width: '500px',
        component: require('@/views/tenant/supplier/info/setting').default,
        buttons: [{ text: '确定', callback: 'handleSubmit' }],
        on: {
          refresh: () => {
            let that = this
            that.onLoad(that.page)
          }
        },
        props: {
          id: row.id,
          info: { isSynergy: row.isSynergy, isCheck: row.isCheck, purchaseEngineer: row.purchaseEngineer }
        }
      })
    },
    handleSupplier(row) {
      this.$quickModal({
        title: '供货能力清单',
        width: '50%',
        component: require('@/views/tenant/supplier/info/components/supplier-list').default,
        buttons: [{ text: '关闭', callback: 'handleClose' }]
      })
    },
    openImport() {
      const modal = this.$quickModal({
        title: '导入供应商',
        width: '400px',
        component: h =>
          h('easy-upload', {
            props: {
              accept: '.xls,.xlsx',
              limit: 1,
              onSuccess: async () => {
                await this.$store.dispatch('refreshToken', this.excelForm)
                this.$message.success('导入成功')
                modal.visible = false
              }
            }
          })
      })
    },
    handleGet() {
      this.$confirm('是否导出供应商信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // window.open('/cdn/demo.xlsx')
      })
    }
  }
}
</script>
